<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <link href="css/main.css" type="text/css" rel="stylesheet">
</head>
<body style="background-color: #f7f7f7" onload="time_fun()">
<div class="header">
    <div class="back" onclick="javascript:history.back(-1);">
        <span></span>
    </div>
    充电时间
</div>
<div class="content">
    <h2 class="time-title">充电时间</h2>
    <h1 id="mytime">00:00:00</h1>
    <P class="time-accounts" >当前费用：<span id="timer">0</span>.00元</P>
    <p class="time-bottom">关闭后,请重置密码</p>
</div>
<div class="time-button" onclick="to()">结束充电</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
    function two_char(n) {
        return n >= 10 ? n : "0" + n;
    }
    function time_fun() {
        var sec=0;
        setInterval(function () {
            sec++;
            var date = new Date(0, 0);
            date.setSeconds(sec);
            var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds();
            var time = 60*h+m;
                document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s);
            if(time >=0 && time <= 20){
                document.getElementById("timer").innerText = "1";
            }else if(time/20){
                document.getElementById("timer").innerText = parseInt(time/20)+1;
            }else {
                document.getElementById("timer").innerText = parseInt(time/20);
            }
        }, 1000);
    }
    function to(){
        var  Str = document.getElementById("mytime").innerText;
        var  Temp = Str.split(':');
        var  Minute = 60* Number(Temp[0]) + Number(Temp[1]);
        document.location = "accounts.html?time=" + Minute;
    }
</script>
<script>

</script>
</html>